<template>
  <div class="mod-config">
    <basic-container>
      <div class="boxsty zhiBiao">
        <div class="flex justifyContentSpaceBetween">
          <div class="tabletext">奖金分配</div>
          <div class="tabletext">
          </div>
        </div>
        <div>&nbsp;</div>
        <div style="height: 50px; border-bottom: 1px solid #b0bde2">
          <el-button type="primary" @click="addOrUpdateHandle()">机构分配</el-button>
          <el-button type="primary" >员工分配</el-button>
        </div>
        <el-form :inline="true" :model="dataForm"  class="form-inline">
          <el-form-item label="奖金名称">
            <el-input v-model="dataForm.mc" placeholder="奖金名称"></el-input>
          </el-form-item>
          <el-form-item label="奖金发放周期">
            <el-input v-model="dataForm.zq" placeholder="奖金发放周期"></el-input>
          </el-form-item>
          <el-form-item label="资金类别">
            <el-radio v-model="dataForm.radio" label="1">员工</el-radio>
            <el-radio v-model="dataForm.radio" label="2">机构</el-radio>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" class="marginLeft" plain>检索</el-button>
          </el-form-item>
        </el-form>

        <el-table :data="dataList"  stripe  class="avue-crud" height="450px">
          <el-table-column type="selection" width="55" align="center"></el-table-column>
          <el-table-column prop="" label="序号" type="index" width="70">
          </el-table-column>
          <el-table-column prop="zjlb" label="资金类别" width="100"></el-table-column>
          <el-table-column prop="zjmc" label="奖金名称" >
          </el-table-column>
          <el-table-column prop="ffdx" label="发放对象"></el-table-column>
          <el-table-column prop="ffzq" label="发放周期"></el-table-column>
          <el-table-column prop="ze" label="总额（元）"></el-table-column>
          <el-table-column prop="ffzt" label="发放状态"></el-table-column>
          <el-table-column label="操作" width="150px">
            <template slot-scope="scope">
              <el-button type="primary" plain size="small">编辑</el-button>
<!--              <el-button v-if="permissions.jiangjin_jiangjinryxxb_del" type="danger" plain size="small"-->
<!--                         @click="deleteHandle(scope.row.ryCode)">删除-->
<!--              </el-button>-->
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 添加修改 -->
      <table-form if="addOrUpdateVisible" ref="addOrUpdate" ></table-form>
    </basic-container>
  </div>
</template>

<script>
import TableForm from './jgPage';

export default {
  name: "index",
  components:{
    TableForm
  },
  data(){
    return{
      dataForm:{
        mc:'',
        zq:'',
        radio:'2',
      },
      dataList:[],
      addOrUpdateVisible : false,


    }
  },
  created() {
    this.getDataList();
  },
  methods:{
    // 新增 / 修改
    addOrUpdateHandle() {
      this.addOrUpdateVisible = true

      this.$nextTick(() => {
        this.$refs.addOrUpdate.init()
      })
    },
    getDataList(){
      this.dataList=[
        {zjlb:"机构",zjmc:"季度奖",ffdx:"西安中心",ffzq:"4季度",ze:"1,000,000.00",ffzt:"待分配"},
        {zjlb:"机构",zjmc:"季度奖",ffdx:"成都中心",ffzq:"3季度",ze:"900.00",ffzt:"审批中"},
        {zjlb:"机构",zjmc:"季度奖",ffdx:"大庆中心",ffzq:"4季度",ze:"1,000.00",ffzt:"已完成"},
        {zjlb:"机构",zjmc:"季度奖",ffdx:"吉林业务部",ffzq:"4季度",ze:"2,000.00",ffzt:"待分配"},
      ]
    }
  }
}
</script>

<style scoped>

</style>
